<template>
	<div v-loading.fullscreen="loading">
		<el-dialog :close-on-click-modal="false" title="平台协议配置" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
			<el-tabs v-model="activeType" @tab-click="handleClick" style="height: 100%;">
				<el-tab-pane label="用户协议" name="service_agreement" class="tab-pane">
					<div>
						<sc-editor v-model="form.introduction" placeholder="请输入内容" :height="500"></sc-editor>
					</div>
				</el-tab-pane>
				<el-tab-pane label="隐私协议" name="privacy_agreement" class="tab-pane">
					<div>
						<sc-editor v-model="form.introduction" placeholder="请输入内容" :height="500"></sc-editor>
					</div>
				</el-tab-pane>
				<el-tab-pane label="使用协议和版权申明" name="use_agreement_copyright" class="tab-pane">
					<div>
						<sc-editor v-model="form.introduction" placeholder="请输入内容" :height="500"></sc-editor>
					</div>
				</el-tab-pane>
				<el-tab-pane label="用户隐私保护指引" name="user_privacy_agreement" class="tab-pane">
					<div>
						<sc-editor v-model="form.introduction" placeholder="请输入内容" :height="500"></sc-editor>
					</div>
				</el-tab-pane>
				<el-tab-pane label="儿童隐私政策" name="children_privacy_agreement" class="tab-pane">
					<div>
						<sc-editor v-model="form.introduction" placeholder="请输入内容" :height="500"></sc-editor>
					</div>
				</el-tab-pane>
			</el-tabs>
			<template #footer>
				<el-button @click="visible=false">取 消</el-button>
				<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
const scEditor = defineAsyncComponent(() => import('@/components/scEditor'))
export default {
	emits: ['success', 'closed'],
	components: {
		scEditor
	},
	data() {
		return {
			loading: false,
			visible: false,
			isSaveing: false,
			activeType: 'service_agreement',
			//表单数据
			form: {
				introduction: ''
			},
			status: true,
			//验证规则
			rules: {
			},
			titlemap: '',
			value: '',
		}
	},
	mounted() {
	},
	methods: {
		//显示
		open() {
			this.visible = true
			return this
		},
		handleClick() {
			this.setData(this.activeType)
		},
		//表单提交方法
		async submit() {
			if (!this.form.introduction) {
				this.$notify.error(`请输入${this.titlemap}详情`)
			} else {
				this.isSaveing = true
				let obj = {}
				obj[this.value] = this.form.introduction
				let arr = []
				for (let i in obj) {
					let obj2 = {
						key: i,
						value: obj[i]
					}
					arr.push(obj2)
				}
				let res = await this.$API.system.config.put({ config: arr }).finally(() => {
					this.isSaveing = false
				})

				if (res.error == 0) {
					this.isSaveing = false
					this.$notify.success("保存成功")
				} else {
					this.isSaveing = false
				}
			}
		},
		//表单注入数据
		async setData(value) {
			this.value = value
			let arr = [value]
			this.loading = true
			var res = await this.$API.system.config.get({ key: arr }).finally(() => {
				this.loading = false
			});
			if (res.error == 0) {
				this.form.introduction = res.data[value] ? res.data[value] : ''
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.title {
	padding-bottom: 20px;
	padding-left: 0px;
}

.tab-pane {
	margin-top: 10px;
}

:deep(.el-dialog .el-dialog__body) {
	padding: 10px 20px;
}
:deep(.ck.ck-editor__main>.ck-editor__editable) {
    height: 350px !important;
}
</style>
